<template>
  <custom-container v-if="!showEffectDetail">
    <custom-container-body>
      <el-table :data="tableData" :loading="loading" element-loading-text="加载中..." border border-radius
      >
        <el-table-column
          align="center"
          prop="levelName"
          label="代理层级">
        </el-table-column>

        <el-table-column
          align="center"
          prop="proxyEffectCount"
          label="有效下级代理总数">
        </el-table-column>

        <el-table-column
          align="center"
          label="提成百分比">
          <template slot-scope="{row}">
            {{row.commissionRate*100}}%
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="下级代理佣金总额">
          <template slot-scope="{row}">
            {{row.subCommissionTotal |currency}}
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="实际发放总额">
          <template slot-scope="{row, $index}">
            <el-button type="link" size="small"
                       @click="openEffectDetail(row, $index)"
            >
              {{row.commissionTotal | currency}}
            </el-button>
          </template>
        </el-table-column>

        <template slot="empty">
          <div class="el-table__empty">
            <svg-icon class="el-table__empty-icon" icon-class="grid-empty-2"></svg-icon>
            <div class="el-table-text">暂无数据</div>
          </div>
        </template>
      </el-table>

      <div class="el-pagination-container">
        <el-warning align="top">
          注意事项：<br/>
          1.实际发放=下级代理佣金总额×提成比例<br/>
          2.提成百分比，当下级出现负佣金，提成百分比为0.0%
        </el-warning>
      </div>
    </custom-container-body>
  </custom-container>
  <low-proxy-detail
    v-else
    :info="effectDetail"
  ></low-proxy-detail>
</template>

<script>
	import {commissionSubLevelApi as getApi} from '@/services/api/report';

	import {grid} from '@/build';
	import LowProxyDetail from './low-proxy-detail';

	export default {
		name: "low-proxy-rake",

		mixins: [grid],

		components: {
			LowProxyDetail,
		},

    model:{
			prop:'showEffectDetail',
      event:'changeEffectDetail'
    },

		props: ['info','showEffectDetail'],

		data() {
			return {
				filters: {
					settleDate: this.info.row.settle_date,
				},
				effectDetail: undefined,
				tableData: [],
			};
		},

    watch:{
      effectDetail(val){
        this.$emit('changeEffectDetail',val ? true : false);
      }
    },

		methods: {
			openEffectDetail(row, index) {
				this.effectDetail = {...this.filters, ...row};
			},
			closeEffectDetail() {
				this.effectDetail = undefined;
			},
			close() {
				if (this.effectDetail) {
					this.closeEffectDetail();
				} else {
					this.closeDetail();
				}
			}
		},

		mounted() {
			this.bindGet(getApi, 'tableData', {
				action: 'getGrid',
				sendingData: 'filters',
			});

			this.getAll();
		}
	};
</script>

<style scoped>

</style>